<span class="title" mat-dialog-title>{{ 'USER.PERSONALACCESSTOKEN.ADDED.TITLE' | translate }}</span>
<div mat-dialog-content>
  <cnsl-info-section [type]="InfoSectionType.WARN">
    {{ 'USER.PERSONALACCESSTOKEN.ADDED.DESCRIPTION' | translate }}
  </cnsl-info-section>

  <ng-container *ngIf="tokenResponse">
    <div class="row">
      <p class="left cnsl-secondary-text">{{ 'USER.PERSONALACCESSTOKEN.ID' | translate }}</p>
      <p class="right">{{ tokenResponse.tokenId }}</p>
    </div>

    <div class="row" *ngIf="tokenResponse.token">
      <p class="left cnsl-secondary-text">{{ 'USER.PERSONALACCESSTOKEN.TOKEN' | translate }}</p>
      <div class="right">
        <button
          class="ctc"
          [disabled]="copied === tokenResponse.token"
          [matTooltip]="(copied !== tokenResponse.token ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
          cnslCopyToClipboard
          [valueToCopy]="tokenResponse.token"
          (copiedValue)="copied = $event"
          mat-icon-button
        >
          <i *ngIf="copied !== tokenResponse.token" class="las la-clipboard"></i>
          <i *ngIf="copied === tokenResponse.token" class="las la-clipboard-check"></i>
        </button>
        <span class="token">{{ tokenResponse.token }}</span>
      </div>
    </div>
  </ng-container>
</div>
<div mat-dialog-actions class="action">
  <button color="primary" mat-raised-button class="ok-button" (click)="closeDialog()">
    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
</div>
